<template>
  <div class="restaurant-detail-container">
    <div class="banner">
      <swiper :options="swiperOptions">
        <swiper-slide v-for="(slide, index) in bannerSlides" :key="index">
          <img :src="slide.src" :alt="slide.alt">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="title-container">
      <h1>{{ restaurant.restaurantName }}</h1>
      <div class="rating">
        <span v-for="n in Math.floor(restaurant.rating)" :key="n">★</span>
        <span v-if="restaurant.rating % 1!== 0">☆</span>
        <span>{{ restaurant.rating }}</span>
      </div>
      <div class="price">¥{{ restaurant.price }}/人</div>
    </div>
    <div class="features">
      <span v-for="feature in restaurant.features" :key="feature">{{ feature }}</span>
    </div>
    <div class="location">
      <i class="icon-location"></i>
      <span>{{ restaurant.location }}</span>
      <button @click="navigate">导航</button>
    </div>
    <div class="foodName">
      <i class="icon-location"></i>
      <span>{{ restaurant.foodName }}</span>

    </div>
    <div class="nav-tabs-container">
      <div class="nav-tabs">
        <div class="tab" :class="{ active: selectedTab === 'vouchers' }" @click="selectVouchers('vouchers')" style="padding: 8px 15px; cursor: pointer; font-size: 18px; color: orange;">超值券</div>
        <div class="tab" :class="{ active: selectedTab === 'packages' }" @click="selectPackages('packages')" style="padding: 8px 15px; cursor: pointer; font-size: 18px;">优惠套餐</div>
        <div class="tab" :class="{ active: selectedTab === 'dishes' }" @click="selectTab('dishes')" style="padding: 8px 15px; cursor: pointer; font-size: 18px;">菜品</div>
        <div class="tab" :class="{ active: selectedTab === 'comments' }" @click="selectTab('comments')" style="padding: 8px 15px; cursor: pointer; font-size: 18px;">评价</div>
      </div>
      <div class="tab - sub - info">
        <div v-if="selectedTab === 'vouchers'">90代100</div>
        <div v-if="selectedTab === 'packages'">5.2折起</div>
        <div v-if="selectedTab === 'dishes'">推荐菜品</div>
        <div v-if="selectedTab === 'comments'">999人评价</div>
      </div>
    </div>



  <div class="vouchers-list">
    <div class="vouchers-item" v-for="voucher in vouchers" :key="vouchers.id"  @click="">

      <div class="vouchers-info">
        <h3>{{ voucher.name }}</h3>
        <p>{{ voucher.description }}</p>
        <div class="price-info">
          <span>¥{{ voucher.price }}</span>
          <span>{{ voucher.discount }}</span>
        </div>
      </div>
      <button class="purchase-btn" @click="purchase">抢购</button>
      <div class="sales-info">
        <span>半年售 {{ voucher.sales }}</span>
      </div>


    </div>
  </div>


    <div class="package-container">
      <h2 class="package-title">套餐购买</h2>
      <div class="package-item" v-for="packages in package" :key="package.packageId" @click="toSubmitMeal(packages.packageId)">
        <div class="package-image">
          <img :src="packages.packageImage" alt="套餐图片">
        </div>
        <div class="package-info">
          <h3 class="package-name">{{packages.packageName}}</h3>
          <p class="available-days">{{packages.availableDays}}</p>
          <p class="description">{{packages.description}}</p>
          <div class="price-info">
            <span class="discounted-price">¥{{packages.discountedPrice}}</span>
            <span class="discount-tag">{{packages.discount}}折</span>
            <span class="original-price">¥{{packages.originalPrice}}</span>
          </div>
          <div class="sales-info">半年售 {{packages.salesNum}}</div>
          <button class="purchase-btn" @click="toSubmitMeal()">抢购</button>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
import axios from "axios";
export default {
  props: {
    voucher: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  created() {
    console.log(this.foodId)
    this.axios.get('http://localhost:1000/food/findById/'+this.foodId).then(res =>{
      this.restaurant = res.data.data;
    })
  },


  data() {
    return {
      vouchers:'',
      package:'',
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000, // 轮播时间设置为 3000 毫秒，即 3 秒
          disableOnInteraction: false
        }
      },
      restaurant: {
        foodId: '',
        name: '鼓楼金记刷肉',
        images: [],
        rating: 4.6,
        pricePerPerson: 38,
        features: ['有包厢', '空调开放', '有宝宝椅', '手机可充电'],
        address: '北京东城区交道口南大街25号',

      },
      foodId:this.$route.query.foodId,
      bannerSlides: [
        { src: 'https://imgs.699pic.com/images/501/406/207.jpg!seo.v1', alt: 'Banner 1' },
        { src: 'https://imgs.699pic.com/images/500/736/555.jpg!seo.v1', alt: 'Banner 2' },
        { src: 'https://imgs.699pic.com/images/500/465/289.jpg!seo.v1', alt: 'Banner 3' }
      ]
    };
  },
  methods: {
    toSubmitMeal(packageId){
      console.log(packageId);
      this.$router.push({path:'/submitMeals',query:{packageId:packageId}});
    },
    selectPackages(){
      axios.post('http://localhost:1000/food/findMeals').then(res =>{
        this.package = res.data.data;
      })
    },
    selectVouchers(){
      axios.post('http://localhost:1000/food/findVouchers').then(res =>{
        this.vouchers = res.data.data;
      })
    },
    findVouchers(){
      axios.post('http://localhost:1000/food/findVouchers').then(res =>{
        this.vouchers = res.data.data;
      })

    },
    handlePurchase() {
      // 这里可以添加抢购的逻辑，比如调用后端接口等
      console.log('触发抢购操作');
    },

    purchase() {
      // 这里可以实现抢购的逻辑，例如发送请求到后端进行购买操作等
      alert('抢购成功！');
    },
    selectTab(tabName) {
      this.findVouchers()
      this.selectedTab = tabName;
    },
    navigate() {
      // 这里可以使用第三方地图API实现导航功能，例如百度地图、高德地图等
      alert('导航功能待实现');
    }
  }
};
</script>

<style scoped>
.package-container {
             padding: 10px;
           }

.page-title {
          font-size: 20px;
          margin-bottom: 10px;
        }

.package-item {
             display: flex;
             align-items: flex-start;
             border: 1px solid #ccc;
             border-radius: 5px;
             padding: 10px;
             margin-bottom: 10px;
           }

.package-image {
             width: 100px;
             margin-right: 10px;
           }

.package-image img {
             width: 100%;
             height: auto;
           }

.package-info {
             flex: 1;
           }

.package-name {
             font-size: 16px;
             margin-bottom: 5px;
           }

.available-days {
               color: #666;
               margin-bottom: 5px;
             }

.description {
  color: #666;
  margin-bottom: 5px;
}

.price-info {
           display: flex;
           align-items: center;
           margin-bottom: 5px;
         }

.discounted-price {
                color: red;
                font-size: 16px;
                margin-right: 10px;
              }

.discount-tag {
              background-color: #f00;
              color: white;
              padding: 2px 6px;
              border-radius: 2px;
              font-size: 12px;
            }

.original-price {
              color: #999;
              text-decoration: line-through;
              font-size: 14px;
            }

.sales-info {
           color: #666;
           margin-bottom: 5px;
         }

.purchase-btn {
              background-color: orange;
              color: white;
              border: none;
              padding: 8px 15px;
              border-radius: 3px;
              cursor: pointer;
            }
.nav-tabs-container {
  margin-top: 10px;
}

.nav-tabs {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tab {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 18px;
  border-bottom: 2px solid transparent;
}

.tab.active {
  border-bottom: 2px solid orange;
  color: orange;
}

.tab-sub-info {
               margin-top: 5px;
               font-size: 16px;
               color: #666;
             }
.voucher-container {
             border: 1px solid #ccc;
             border-radius: 5px;
             padding: 20px;
             width: 300px;
             margin: 0 auto;
           }

.voucher-title {
             font-size: 20px;
             margin-bottom: 10px;
           }

.voucher-desc {
             color: #666;
             margin-bottom: 15px;
           }

.price-info {
           display: flex;
           align-items: center;
           margin-bottom: 10px;
         }

.original-price {
              font-size: 18px;
              color: red;
              margin-right: 10px;
            }

.discount-tag {
              background-color: #f00;
              color: white;
              padding: 2px 6px;
              border-radius: 2px;
            }

.sales-info {
           color: #666;
           margin-bottom: 15px;
         }

.purchase-btn {
              background-color: orange;
              color: white;
              border: none;
              padding: 10px 20px;
              border-radius: 3px;
              cursor: pointer;
            }
.date {
  color: #999;
  margin-left: 10px;
}

.rating-stars img {
            width: 20px;
            height: 20px;
            margin-right: 3px;
          }

.photos {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 10px;
  margin-bottom: 10px;
}

.photo-count {
           background-color: rgba(0, 0, 0, 0.5);
           color: white;
           padding: 5px 10px;
           border-radius: 3px;
           align-self: center;
         }
.banner {
  height: 200px;
  overflow: hidden;
}
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voucher-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;
}
.voucher-info {
  flex: 1;
  margin-right: 10px;
}
.voucher-info h3 {
  font-size: 16px;
  margin: 0;
}
.voucher-info p {
  font-size: 12px;
  color: #999;
  margin: 5px 0;
}
.price-info {
  display: flex;
  align-items: center;
}
.price-info span {
  font-size: 14px;
  margin-right: 5px;
}
.purchase-btn {
  background-color: #ff6600;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
}
.sales-info {
  font-size: 12px;
  color: #999;
}
.restaurant-detail-container {
  padding: 10px;
}
.swiper-container {
  height: 200px;
  margin-bottom: 10px;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.title-container h1 {
  font-size: 20px;
  margin: 0;
}
.rating {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.rating span {
  font-size: 16px;
  margin-right: 5px;
}
.price {
  font-size: 14px;
  color: #999;
}
.features {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.features span {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 5px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
.location {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.location i {
  margin-right: 5px;
}
.location button {
  background-color: #ff6600;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  margin-left: 10px;
}
.tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 10px;
}
.tab {
  padding: 5px 10px;
  cursor: pointer;
}
.tab.active {
  border-bottom: 2px solid #ff6600;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
</style>